<template>
  <div class="tabs">
    <el-tag 
     v-for="(item,index) in mianbao" 
     :key="item.path" 
     :closable="item.name !== 'home'"
     @click="changeMenu(item)"
     @close="handMenu(item,index)"
     size="small"
     :effect="$route.name === item.name ? 'dark' : 'plain'">
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>

export default {
  name:'common-tag',
 data(){
  return{}
 },
 computed:{
  mianbao(){
      return this.$store.state.tab.tabList
    }
 },
 methods:{
   changeMenu(item){
     this.$router.push({name: item.name})
   },
   handMenu(item,index){
       this.$store.commit('closeTag',item)
       const length = this.$store.state.tab.tabList.length
        // 删除之后的跳转逻辑
        if (item.name !== this.$route.name) {
                return
            }
            // 表示的是删除的最后一项
            if (index === length) {
                this.$router.push({
                    name: this.$store.state.tab.tabList[index - 1].name
                })
            } else {
                this.$router.push({
                    name: this.$store.state.tab.tabList[index].name
                })
            }
      }
 },
 mounted(){
    
}
}
</script>

<style scoped lang="less">
.tabs {
    padding: 20px 20px 10px;
    .el-tag {
        margin-right: 15px;
        cursor: pointer;
    }
}
</style>